<template>
	<view>
		<view class="user-info">
			<view>
				<image @click="authTo('pages/my/info')" v-if="info" class="head-img" mode="aspectFill" :src="oss(info.avatar)"></image>
				<image @click="login" v-else class="head-img"  src="../../static/logo.png"></image>
			</view>
			<view class="name-box">
				<view class="name" @click="authTo('pages/my/info')" v-if="info">{{info.nickname || '半柿会员'}}</view>
				<view class="name" @click="login" v-else>请登录</view>
				<!-- <view class="name">李梅</view> -->
				<view class="" style="display: flex;">
					<view class="job-text">邀请码：{{info.invitecode || ''}}</view>
					<view class="renzhen-box" @click="authTo('pages/my/renZheng/renZheng')">
						<view class="rz-tab tab1" v-if="info.company != 1 && info.ident != 1">未认证</view>
						<view class="rz-tab tab2" v-if="info.company == 1">企业认证</view>
						<view class="rz-tab tab3" v-if="info.ident == 1">个人认证</view>
					</view>
				</view>
				<!-- <view class="job-text">邀请码：1234567</view> -->
			</view>
		</view>
		
		<!-- 积分 余额 -->
		<view class="jf-box">
			<view class="each-box">
				<view class="jf-count">
					<view class="">{{money || 0}}</view>
					<view class="tint"></view>
				</view>
				<view class="jf-text">我的积分</view>
				<view class="jf-btn-box">
					<view class="jf-btn-1" @click="goto('pagesA/index/recharge')">充值</view>
					<view class="jf-btn-2" @click="goto('/pages/my/integral/integral')">明细</view>
				</view>
			</view>
			<view class="each-box">
				<view class="jf-count">
					<view class="">{{info.money || 0}}</view>
					<view class="tint" @click="authTo('pages/my/balanceDetail')">明细</view>
				</view>
				<view class="jf-text">我的余额（元）</view>
				<view class="jf-btn-box">
					<view class="jf-btn-1" @click="authTo('pages/my/recharge/recharge')">充值</view>
					<view class="jf-btn-2" @click="authTo('pages/my/withdraw/withdraw?type=2')">提现</view>
				</view>
			</view>
		</view>
		
		<view class="info-box">
			<view class="info-each-box" v-for="i in infoType" @click="skip(i)">
				<view class="">
					<view class="type-name">{{i.name}} <image src="../../static/right-img.png" mode=""></image> </view>
					<view class="type-tint">{{i.checkText}}</view>
				</view>
				<view class="img">
					<image :src="i.img" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="task-box">
			<view class="title">任务管理</view>
			<view class="each-box">
				
				<view class="each" @click="authTo('pages/my/task/receive?type=money')">
					<image src="../../static/newMy/my-8.png" mode=""></image>
					<view class="text">已接悬赏任务</view>
				</view>
				
				<view class="each" @click="authTo('pages/my/task/receive?type=score')">
					<image src="../../static/newMy/my-8.png" mode=""></image>
					<view class="text">已接积分任务</view>
				</view>
				<!-- pages/my/city/receive -->
				<view class="each" @click="authTo('pages/my/task/release')">
					<image src="../../static/newMy/my-8.png" mode=""></image>
					<view class="text">悬赏任务管理</view>
				</view>
			</view>
		</view>
		
		<!-- 服务者管理 -->
		<view class="task-box" v-if="info.service == 1">
			<view class="title-box">
				<view class="title">服务者管理</view>
				<view class="switch">
					<text> <text :class="{'switch-color':accept}">营业</text> / <text style="padding-right: 16rpx;" :class="{'switch-color':!accept}">休息</text> </text> <text style="padding-right: 16rpx;">接单状态</text> <u-switch v-model="accept" activeColor="#FEBF4E" @change="change"></u-switch>
				</view>
			</view>
			<view class="each-box">
				<view class="each" @click="operation('pages/newissue/skill',1)">
					<image src="../../static/newMy/my-10.png" mode=""></image>
					<view class="text">技能发布</view>
				</view>
				<view class="each" @click="operation('pages/my/skill/skillist',1)">
					<image src="../../static/newMy/my-11.png" mode=""></image>
					<view class="text">技能管理</view>
				</view>
				<view class="each" @click="operation('pagesA/serveUpdate/serveUpdate?video='+info.video + '&videos='+info.videos,1)">
					<image src="../../static/newMy/my-12.png" mode=""></image>
					<view class="text">视频介绍</view>
				</view>
				<!-- <view class="each" @click="operation('pages/my/skill/expire')">
					<image src="../../static/newMy/my-12.png" mode=""></image>
					<view class="text">经验证书</view>
				</view> -->
				<view class="each" @click="operation('pages/my/city/receivelist',1)">
					<image src="../../static/newMy/my-13.png" mode=""></image>
					<view class="text">服务订单</view>
				</view>
				<view class="each" @click="operation('pagesA/serveUpdate/serveUpdate?address='+info.address)">
					<image src="../../static/newMy/mouse-square.png" mode=""></image>
					<view class="text">更新位置</view>
				</view>
				<view class="each" @click="operation('/pages/my/updateMobile/updateMobile?mobile=' + info.mobile)">
					<image src="../../static/newMy/mobile.png" mode=""></image>
					<view class="text">更新电话</view>
				</view>
				<view class="each" @click="authTo('pages/my/level')">
					<image src="../../static/newMy/my-14.png" mode=""></image>
					<view class="text">服务置顶</view>
				</view>
				<view class="each" @click="operation('pagesA/Newindustry',1)">
					<image src="../../static/newMy/my-11.png" mode=""></image>
					<view class="text">新增行业</view>
				</view>
			</view>
			
			<view style="padding: 32rpx 0 0 32rpx;font-size: 24rpx;" v-if="info.plus">服务的置顶到期时间：{{info.exittime | date('yyyy-mm-dd hh:MM')}}</view>
		</view>
		
		<!-- 设置与帮助 -->
		<view class="task-box">
			<view class="title">设置与帮助</view>
			<view class="each-box">
				<view class="each" @click="show = true">
					<image src="../../static/newMy/my-15.png" mode=""></image>
					<view class="text">联系我们</view>
				</view>
				<view class="each" @click="authTo('pages/my/feedback/feedback')">
					<image src="../../static/newMy/my-16.png" mode=""></image>
					<view class="text">意见反馈</view>
				</view>
				<view class="each" @click="authTo('pages/my/help')">
					<image src="../../static/newMy/my-17.png" mode=""></image>
					<view class="text">帮助中心</view>
				</view>
				<view class="each" @click="authTo('pages/my/msg')">
					<image src="../../static/newMy/my-18.png" mode=""></image>
					<view class="text">我的消息</view>
				</view>
				<view class="each" @click="becameServe()" v-if="!info.service">
					<image src="../../static/serve.png" mode=""></image>
					<view class="text">成为服务者</view>
				</view>
				<view class="each" @click="authTo('pages/my/attention/attention')">
					<image src="../../static/newMy/my-20.png" mode=""></image>
					<view class="text">关注服务者</view>
				</view>
				<view class="each" @click="authTo('pages/my/renZheng/renZheng')">
					<image src="../../static/newMy/my-21.png" mode=""></image>
					<view class="text">认证中心</view>
				</view>
				<view class="each" @click="bindCodeShow()">
					<image src="../../static/serve.png" mode=""></image>
					<view class="text">绑定邀请码</view>
				</view>
				<view class="each" @click="authTo('pages/my/invite/invite')">
					<image src="../../static/newMy/my-22.png" mode=""></image>
					<view class="text">用户推广</view>
				</view>
				<view class="each" @click="authTo('pages/my/setting/setting')">
					<image src="../../static/newMy/my-19.png" mode=""></image>
					<view class="text">设置</view>
				</view>
				<!-- <view class="each" @click="authTo('pages/forum/list')">
					<image src="../../static/newMy/my-23.png" mode=""></image>
					<view class="textred">便民信息管理</view>
				</view> -->
			</view>
		</view>
		
		<u-popup :show="show" @close="show = false" mode="center" :round="20">
			<view class="serveBox" v-if="show">
				<image :src="oss(serve.serviceimage)" mode="" class="icon"></image>
				<text class="word">微信二维码</text>
				<text class="word">客服手机号:{{serve.mobile}}</text>
			</view>
		</u-popup>
		
		<u-popup :closeable="true" :show="updateShow" @close="close" @open="open" :round='10' mode="center">
		    <view class="popup-box">
		        <view class="gh-title">非会员不可更新信息</view>
				<view class="growrule">
					<view class="btn2" @click="updateShow = false">关闭</view>
					<view class="btn1" @click="updateShow = false,authTo('pages/my/level')">购买会员</view>
				</view>
		    </view>
		</u-popup>
		
		<u-popup :closeable="true" :show="memberShow" @close="close" @open="open" :round='10' mode="center">
		    <view class="popup-box">
		        <view class="gh-title">购买会员后即可使用该功能</view>
				<view class="growrule">
					<view class="btn2" @click="memberShow = false">关闭</view>
					<view class="btn1" @click="memberShow = false,authTo('pages/my/level')">购买会员</view>
				</view>
		    </view>
		</u-popup>
		
		<u-popup :closeable="true" :show="codeShow" @close="close" @open="open" :round='10' mode="center">
		    <view class="popup-box" style="height: 360rpx;">
		        <view class="gh-title">绑定邀请码</view>
				<view class="ipt">
					<input v-model="code" type="text" placeholder="输入邀请码" />
				</view>
				<view class="growrule">
					<view class="btn2" @click="codeShow = false">取消</view>
					<view class="btn1" @click="bindCode()">确定</view>
				</view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			infoType:[
				{name:'二手房',checkText:'管理二手房发布信息',img:'../../static/newMy/my-1.png',url:'/pages/my/issueList/idleList?type=1'},
				{name:'出租房',checkText:'管理出租房发布信息',img:'../../static/newMy/my-2.png',url:'/pages/my/issueList/idleList?type=2'},
				{name:'商业地产',checkText:'管理商业地产信息',img:'../../static/newMy/my-3.png',url:'/pages/my/issueList/idleList?type=3'},
				{name:'闲置信息',checkText:'管理闲置发布信息',img:'../../static/newMy/my-4.png',url:'/pages/my/upload/myupload'},
				{name:'招聘信息',checkText:'查看招聘信息',img:'../../static/newMy/my-5.png',url:'/pages/my/issueList/recruitInfo'},
				{name:'服务订单',checkText:'查看已经预约的服务',img:'../../static/newMy/my-6.png',url:'/pages/my/city/servelist'},
				{name:'便民信息',checkText:'管理便民发布信息',img:'../../static/newMy/my-0.png',url:'/pages/forum/list'},
				// {name:'同城任务',checkText:'管理同城任务发布信息',img:'../../static/newMy/my-1.png',url:'/pages/my/city/releaselist'},
				{name:'求购信息',checkText:'管理我的求购信息',img:'../../static/newMy/my-4.png',url:'/pagesA/myPurchase/myPurchase'},
			],
			value:true,
			info:'',
			money:'',
			show: false,
			serve:'',
			updateShow:false,
			memberShow:false,
			codeShow:false,
			code:'',
			accept:false
		}

	},
	onShow() {
		if (uni.getStorageSync('token')) {
			this.getInfo()
		}
	},
	onLoad() {
		this.getConfig()
	},
	methods: {
		bindCode(){
			if(!this.code) {
				this.$u.toast('请输入邀请码');
				return
			}
			uni.$u.http.post('/bindrec',{
				code:this.code
			}).then(res => {
				if (res.code == 1) {
					this.$u.toast(res.msg);
					this.codeShow = false
				}
			}).catch((res) => {
			
			})
		},
		bindCodeShow(){
			this.codeShow = true
		},
		operation(e,i) {
			//没有会员
			if(!this.info.plus && i!=1) {
				this.memberShow = true
			} else {
				this.authTo(e)
			}
		},
		open() {
		    // console.log('open');
		},
		close() {
		    this.updateShow = false
			this.memberShow = false
			this.codeShow = false
		},
		
		//成为服务者
		becameServe(){
			if(this.info.ident){
				this.authTo('pages/newissue/skill')
			}else {
				this.$u.toast('请先完成个人认证');
				setTimeout(()=>{
					this.authTo('pages/my/renZheng/geren')
				},500)
			}
			// if(this.info.city &&  this.info.lng && this.info.lat){
			// 	if(this.info.ident){
			// 		this.authTo('pages/newissue/skill')
			// 	}else {
			// 		this.$u.toast('请先完成个人认证');
			// 		setTimeout(()=>{
			// 			this.authTo('pages/my/renZheng/geren')
			// 		},500)
			// 	}
			// }else {
			// 	this.$u.toast('请先完善资料');
			// 	setTimeout(()=>{
			// 		this.authTo('pages/my/info');
			// 	},500)
			// }
		},
		skip(e){
			console.log(e)
			uni.navigateTo({
				url:e.url
			})
		},
		getInfo() {
			uni.$u.http.post('/index', ).then(res => {
				if (res.code == 1) {
					// console.log(res.data)
					this.info = res.data
					this.accept = res.data.accept ? true : false
					uni.setStorageSync('service',this.info.service)
					
					uni.setStorageSync('ident',this.info.ident)//个人认证
					uni.setStorageSync('company',this.info.company)//企业认证
				}
			}).catch((res) => {
		
			})
			uni.$u.http.post('/getindex').then(res => {
				if (res.code == 1) {
					this.nav = res.data
				}
			}).catch((res) => {
			
			})
			
			//获取积分
			uni.$u.http.post('/rechargecredit', {
				page: this.page,
				type: 'list'
			}).then(res => {
				if (res.code == 1) {
					this.money = res.data.money
				}
			}).catch((res) => {
					
			})
		},
		login() {
			uni.$u.route({
				url: 'pagesA/auth/login'
			})
		},
		getConfig() {
			uni.$u.http.post('/getconfig', {
				type: 13
			}).then(res => {
				if (res.code == 1) {
					this.serve = res.data
				}
			}).catch((res) => {
		
			})
		},
		change(e) {
			console.log(e)
			uni.$u.http.post('/updateaccept', {
				status: e ? 1 : 0
			}).then(res => {
				if (res.code == 1) {
					uni.$u.toast(res.msg)
		
				}
			}).catch((res) => {
		
			})
		},
	}
};
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}
.user-info {
	padding-top: 120rpx;
	display: flex;
	align-items: center;
	margin: 12rpx 0 0 32rpx;
	
	.head-img {
		width: 118rpx;
		height: 118rpx;
		border-radius: 50%;
	}
	
	.name-box {
		margin-left: 32rpx;
		
		.name {
			font-size: 40rpx;
			font-weight: 800;
			color: #1c274c;
		}
		.job-text {
			font-size: 22rpx;
			font-weight: 500;
			color: #a4a9b7;
			margin-top: 10rpx;
		}
		
		.renzhen-box {
			display: flex;
			margin-left: 10rpx;
			.rz-tab {
				width: 114rpx;
				height: 40rpx;
				background: #EBEBEB;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				font-weight: 500;
				font-size: 20rpx;
				color: #A4A9B7;
				line-height: 40rpx;
				text-align: center;
				margin-left: 10rpx;
			}
			.tab2 {
				background-color: #5597FF;
				color: #FFF;
			}
			.tab3 {
				background-color: #FEBF4E;
				color: #333333;
			}
		}
	}
}

.jf-box {
	padding: 0 32rpx;
	margin-top: 40rpx;
	display: flex;
	justify-content: space-between;
	.each-box {
		width: 267rpx;
		height: 180rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		padding: 32rpx;
		.jf-count {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 40rpx;
			font-weight: 800;
			color: #333333;
			.tint {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
			}
		}
		.jf-text {
			font-size: 22rpx;
			margin-top: 8rpx;
			font-weight: 500;
			color: #666666;
		}
		.jf-btn-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 32rpx;
			.jf-btn-1 {
				width: 125rpx;
				height: 56rpx;
				background: #FEBF4E;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				font-size: 26rpx;
				text-align: center;
				font-weight: 500;
				color: #333333;
				line-height: 56rpx;
			}
			.jf-btn-2 {
				width: 125rpx;
				height: 56rpx;
				background: #F6F6F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				font-size: 26rpx;
				text-align: center;
				font-weight: 500;
				color: #999999;
				line-height: 56rpx;
			}
		}
	}
}

.info-box {
	padding: 32rpx;
	width: 618rpx;
	height: 660rpx;
	background: linear-gradient(180deg, #FFFBEF 0%, #FFFFFF 100%);
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	opacity: 1;
	border: 2rpx solid #FFFFFF;
	margin: auto;
	margin-top: 32rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	
	.info-each-box {
		width: 280rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.type-name {
			font-size: 30rpx;
			font-weight: 800;
			color: #333333;
			
			image {
				width: 28rpx;
				height: 28rpx;
				vertical-align: middle;
				margin-left: 16rpx;
			}
		}
		.type-tint {
			font-size: 22rpx;
			font-weight: 500;
			color: #E47748;
			margin-top: 8rpx;
		}
		.img {
			width: 64rpx;
			height: 64rpx;
			background-color: #E47748;
			border-radius: 20rpx;
			image {
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
}

.task-box {
	padding-bottom: 32rpx;
	width: 686rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	opacity: 1;
	margin: auto;
	margin-top: 32rpx;
	.title {
		padding: 32rpx 32rpx 0 32rpx;
		font-size: 30rpx;
		font-weight: 800;
		color: #333333;
	}
	.title-box {
		display: flex;
		justify-content: space-between;
		
		.title {
			font-size: 30rpx;
			font-weight: 800;
			color: #333333;
		}
		.switch {
			display: flex;
			align-items: center;
			padding: 32rpx 32rpx 0 32rpx;
			text {
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}
			.switch-color {
				color: #FF8007;
			}
		}
	}
	.each-box {
		display: flex;
		flex-wrap: wrap;
		.each {
			margin-top: 32rpx;
			width: 25%;
			image {
				display: block;
				width: 48rpx;
				height: 48rpx;
				margin: auto;
			}
			.text {
				font-size: 24rpx;
				margin-top: 12rpx;
				font-weight: 500;
				color: #333333;
				text-align: center;
			}
			.textred {
				font-size: 24rpx;
				margin-top: 12rpx;
				font-weight: 500;
				color: #E47748;
				text-align: center;
			}
		}
	}
}
.serveBox {
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-direction: column;
			padding: 50rpx;

			.icon {
				width: 200rpx;
				height: 200rpx;
			}

			.word {
				font-size: 28rpx;
				color: #999;
				margin-top: 20rpx;
			}
		}
		
		.popup-box {
			width: 560rpx;
			height: 278rpx;
			
			
			.gh-title {
						text-align: center;
						padding-top: 32rpx;
						font-weight: bold;
						padding: 60rpx 0;
						color: #333333;
					}
					.growrule {
						display: flex;
						justify-content: center;
						.btn1 {
							width: 236rpx;
							height: 80rpx;
							background: #FEC04F;
							border-radius: 40rpx 40rpx 40rpx 40rpx;
							font-weight: 500;
							font-size: 26rpx;
							color: #FFFFFF;
							line-height: 80rpx;
							text-align: center;
							margin-left: 12rpx;
						}
						.btn2 {
							width: 236rpx;
							height: 80rpx;
							background: #F6F6F6;
							border-radius: 40rpx 40rpx 40rpx 40rpx;
							font-weight: 500;
							font-size: 26rpx;
							line-height: 80rpx;
							text-align: center;
							margin-right: 12rpx;
						}
					}
					
					.ipt {
						width: 500rpx;
						height: 90rpx;
						margin: auto;
						background: #F5F7F9;
						border-radius: 20px 20px 20px 20px;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;
						top: -30rpx;
					}
		}
</style>
